<template>
  <div id="Tunnel_manage" class="shadow-box">
    <!-- 项目结构及信息 -->
    <div class="middle">
      <div class="tree">
        <!-- 项目树 -->
        <div class="slide">
          <div class="title flex_sb">
            <span>部位树表</span>
            <div>
              <el-button class="w100" size="mini" @click="add_position_btn">新建部位</el-button>
            </div>
          </div>
          <div class="container">
            <!-- 部位树 -->
            <ProjectTree ref="children_tree" :node_click="node_click_fun" :clickData="{ type: 'danger', icon: 'el-icon-delete', title: '点击删除部位' }" :clickfun="del_click_fun"></ProjectTree>
          </div>
        </div>
      </div>
      <div class="areainfo">
        <div class="slide">
          <div class="title">
            <span>部位详情</span>
          </div>
          <div class="container">
            <section>
              <div v-if="selset_tree">
                <PositionForm :fromData="selset_tree" ref="setPositionFormRef"></PositionForm>
                <div class="flex_r_end" style="padding-right: 22px"><el-button type="primary" @click="confirmSet_click">确认修改</el-button></div>
              </div>
              <div v-else>
                <el-empty description="项目根节点"></el-empty>
              </div>
            </section>
          </div>
        </div>
      </div>
      <!-- 弹框，展示 eharts -->
      <Surface :show="surface_show" @exit="surface_show = false"></Surface>
      <!-- 对话框，新建部位 -->
      <el-dialog :title="`新建一个部位`" :visible.sync="addPosition_dialog" ref="addPosition_dialog" :before-close="add_dialog_exit_fun" width="50%">
        <section class="add_dialog_body">
          <PositionForm :fromData="addPosition_req" ref="addPositionFormRef"></PositionForm>
        </section>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addPosition_dialog = false">取 消</el-button>
          <el-button type="primary" @click="addPosition_">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 对话框，新建部位 -->
      <el-dialog title="删除一个部位" :visible.sync="delPosition" width="50%">
        <div>确认删除部位吗</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delPosition = false">取 消</el-button>
          <el-button type="primary" @click="delPosition_">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 确认修改对话框 -->
      <el-dialog title="修改部位" :visible.sync="setPosition_dialog" width="50%">
        <div>确定修改这个部位吗</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setPosition_dialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmSet_">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Surface from '../../components/Monitor/surface.vue'
import ProjectTree from '../../components/Monitor/project_tree.vue'
import PositionForm from '../../components/Monitor/forms/position.vue'
import { addPosition, getPosition, delPosition, setPosition } from '../../api/tunnel_manage/index'
export default {
  name: 'Tunnel_manage',
  data() {
    return {
      surface_show: false,
      // 新建部位对话框
      addPosition_dialog: false,
      // 删除部位对话框
      delPosition: false,
      // 修改部位对话框
      setPosition_dialog: false,
      del_cache: {},
      // 添加部位表单
      addPosition_req: {
        projectId: '',
        name: '',
        code: '',
        parentPositionId: '',
        describeString: '',
        sectionMileage: '',
        instrumentModel: '',
        reservedDeformation: '',
        controlPointIds: '',
        embeddingDate: '',
        surroundingRockClassification: '',
      },
      addPosition_req_rules: {
        name: [{ required: true, message: '请输入部位名称', trigger: 'blur' }],
      },
      // 选中的树节点
      selset_tree: null,
      // 拷贝
      mycopy: ['addPosition_req'],
    }
  },
  components: {
    Surface,
    ProjectTree,
    PositionForm,
  },
  methods: {
    // 新建部位按钮
    add_position_btn() {
      if (this.$store.state.projectInfo instanceof Object) {
        this.addPosition_dialog = true
      } else {
        this.$message.warning('未选择项目')
      }
    },

    // 新建部位事件
    async addPosition_() {
      let boolean = this.$refs.addPositionFormRef.validate()
      if (boolean) {
        this.addPosition_req.projectId = this.$store.state.projectInfo.id
        this.addPosition_req.parentPositionId = this.selset_tree ? this.selset_tree.id : ''
        let res = await addPosition(this.addPosition_req)
        if (res.result == 0) {
          this.add_dialog_exit_fun()
          this.$refs.children_tree.get_project_tree()
        } else {
        }
      }
    },
    // 添加部位对话框关闭事件
    add_dialog_exit_fun() {
      this.addPosition_dialog = false
      this.$refs.addPositionFormRef.resetFields()
    },
    async node_click_fun(data, node) {
      // console.log('父节点收到节点点击')
      this.selset_tree = JSON.parse(JSON.stringify(data))
      if (data.id == this.$store.state.projectInfo.id) this.selset_tree = null
      this.$mycopy(['selset_tree'])
    },
    del_click_fun(data, node) {
      // console.log('父节点收到节点删除点击')
      this.del_cache = { data, node }
      this.delPosition = true
    },
    // 删除部位
    async delPosition_() {
      let res = await delPosition({ id: this.del_cache.data.id })
      if (res.result == 0) {
        this.delPosition = false
        this.$message.success('删除成功')
        this.$refs.children_tree.get_project_tree()
        // 手动更新 DOM
        this.selset_tree = null
      }
    },
    confirmSet_click() {
      let change = Object.keys(this.selset_tree).some(item => {
        if (item == 'children') return
        if (this.selset_tree[item] != this.$selset_tree[item]) {
          return true
        }
      })
      if (change) {
        if (this.$refs.setPositionFormRef.validate()) {
          this.setPosition_dialog = true
        }
      } else {
        this.$message.warning('没有做出任何修改')
      }
    },
    // 修改部位
    async confirmSet_() {
      let reqData = {}
      reqData.name = this.selset_tree.name
      reqData.id = this.selset_tree.id
      let res = await setPosition(reqData)
      if (res.result == 0) {
        this.setPosition_dialog = false
        this.$refs.children_tree.get_project_tree()
        this.$message.success('修改成功')
      }
    },
  },
  mounted() {
    // 存初始数据副本
    this.$mycopy(this.mycopy)
  },
}
</script>

<style lang="scss" scoped>
#Tunnel_manage {
  width: 100%;
  height: 100%;

  .filter {
    width: 100%;
    height: 65px;
    overflow: hidden;
    overflow-x: auto;
  }

  .middle {
    width: 100%;
    // height: calc(100% - 65px);
    height: 100%;
    display: flex;
    justify-content: space-between;

    & > div {
      overflow: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      padding: 0 10px 0 0;
    }

    .tree {
      width: 300px;
      height: 100%;

      .slide {
        height: 100%;
      }
    }

    .areainfo {
      flex: 1;
      height: 100%;

      .slide {
        &:last-child {
          height: 100%;
        }
      }
    }

    .slide {
      width: 100%;

      .title {
        height: 38px;
        display: flex;
        align-items: center;
        font-size: 24px;
        border-bottom: 2px solid #006886;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .container {
        width: 100%;
        height: calc(100% - 50px);
        box-sizing: border-box;
        position: relative;
        padding: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
        overflow-y: auto;
        .position_box {
          position: relative;
          .position_btn {
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        //@at-root
        .selset_tree_form {
          padding: 20px;
        }
      }
    }
  }
}
.add_dialog_body {
  height: 50vh;
  overflow-y: auto;
  padding-right: 60px;
}
</style>
